@import 'config';
.product {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.aside-wrap {
  display: flex;
  flex-direction: column;
  flex: 0 0 px2rem(84px);
  width: px2rem(84px);
  background-color: $light;
  // box-shadow: 0 0 px2rem(8px) rgba($black, .3);
  .menu-wrap{
    flex: 1;
    overflow: hidden;
    // border-bottom: px2rem(1px) solid darken($light,8%);
  }
  .menu{
    .item {
      display: table;
      width: 100%;
      height: px2rem(42px);
      line-height: px2rem(24px);
      @include border-1px(darken($light,8%));
      color: $dark;
      cursor: pointer;
      &.active{
        position: relative;
        z-index: 1;
        border: none;
        color: $black;
        background-color: $primary;
        .text {
          font-weight: bold;
        }
      }
      &.active,&:last-child {
        @include border-none;
      }
      .text {
        font-size: px2rem(12px);
        display: table-cell;
        padding: 0 px2rem(10px);
        vertical-align: middle;
      }
    }
  }
  .explain{
    pointer-events:none;
    box-sizing: border-box;
    padding: px2rem(10px) px2rem(5px) px2rem(5px) px2rem(5px);
    line-height: 1.2;
    font-size: px2rem(8px);
    color: $darker;
    background-color: darken($light, 3%);
    .title{
      font-size: px2rem(12px);
      color: $black;
      margin-bottom: px2rem(4px);
    }
    p{
      margin-bottom: px2rem(5px);
    }
  }
}

.product-wrap {
  flex: 1;
  .product{
    &>.title {
      padding-left: px2rem(10px);
      height: px2rem(32px);
      line-height: px2rem(32px);
      border-left: px2rem(2px) solid $gray;
      font-size: px2rem(12px);
      color: $darker;
      background-color: $light;
    }
  }
  .product-item {
    display: flex;
    margin: 0 px2rem(10px);
    padding: px2rem(10px) 0;
    @include border-1px($gray,dotted);
    &:last-child {
      margin-bottom: 0;
      @include border-none;
    }
    .thumbnail {
      height: px2rem(64px);
      flex: 0 0 px2rem(64px);
      margin-right: px2rem(10px);
      img{
        width: px2rem(64px);
      }
    }
    .content {
      flex: 1;
      .title {
        font-size: px2rem(14px);
        margin: px2rem(2px) 0 px2rem(6px) 0;
        line-height: px2rem(20px);
        color: $black;
      }
      .desc,.extra {
        font-size: px2rem(10px);
        line-height: px2rem(12px);
        color: $darker;
      }
      .desc {
        margin-bottom: px2rem(5px);
        line-height: 1.25;
      }
      .extra {
          font-size: 0;
          .count,
          span {
              font-size: px2rem(10px);
              margin-right: px2rem(5px);
          }
      }
      .price {
        position: relative;
        display: flex;
        align-items: center;
        line-height: px2rem(24px);
        font-weight: bold;
          .sale {
            margin-right: px2rem(8px);
            font-size: px2rem(14px);
            color: $red;
          }
          .del {
            text-decoration: line-through;
            font-size: px2rem(10px);
            color: $dark;
          }
        .cartcontrol-wrap {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
    }
  }
}
